<template>
  <div class="skeleton-header flex-not-shrink">
    <div class="skeleton-header-inner">
      <div class="logo flex-row vertical-center" @click="$router.push('/')">
        <!-- <div class="header-logo"></div>-->
        <span class="app-name">{{ appName }}</span>
        <span v-if="buildOn" class="built-on"> ( built on {{ buildOn }} ) </span>
        <span v-if="testContent" class="env-tag">{{ testContent }}</span>
      </div>
      <!--左侧-->
      <div class="flex-item"></div>
      <!--右侧-->
      <div class="header-right">
        <TopColor style="margin-right: 20px" />
        <TopSystemMessage style="margin-right: 20px" />
        <TopLogs v-if="isDev" style="margin-right: 20px" />
        <TopLock style="margin-right: 20px" />
        <TopFileExplorer style="margin-right: 20px" />
        <TopTheme style="margin-right: 20px" />
        <TopIm style="margin-right: 20px" />
        <TopAvatar />
      </div>
    </div>
  </div>
</template>

<script>
  import TopColor from '@/views/skeleton/widgets/TopColor'
  import TopLock from '@/views/skeleton/widgets/TopLock'
  import TopLogs from '@/views/skeleton/widgets/TopLogs'
  import TopSystemMessage from '@/views/skeleton/widgets/TopSystemMessage'
  import TopTheme from '@/views/skeleton/widgets/TopTheme'
  import TopAvatar from '@/views/skeleton/widgets/TopAvatar'
  import TopIm from '@/views/skeleton/widgets/TopIm'
  import TopFileExplorer from '@/views/skeleton/widgets/TopFileExplorer.vue'
  import { getStore } from '@/util/store'

  export default {
    name: 'SkeletonHeader',
    components: { TopFileExplorer, TopIm, TopAvatar, TopTheme, TopSystemMessage, TopLogs, TopLock, TopColor },
    data() {
      const appName = getStore('appName') || process.env.VUE_APP_APP_NAME
      document.title = appName
      return {
        isDev: process.env.NODE_ENV !== 'production',
        testContent: process.env.VUE_APP_TEST ? '(试用环境)' : '',
        appName,
        buildOn: process.env.VUE_APP_BUILD_DATE
      }
    }
  }
</script>

<style lang="scss">
  .skeleton-header {
    background-color: var(--color-primary);
    background-size: 100% 100%;

    .header-logo {
      display: inline-block;
      width: 44px;
      height: 44px;
      background-size: contain;
    }

    .menu-link {
      color: #fff;
      font-size: 15px;

      &:visited {
        outline: none;
      }
    }

    .app-name {
      margin-left: 20px;
      line-height: 24px;
      white-space: nowrap;
    }

    .env-tag {
      margin-left: 4px;
      padding-top: 1px;
      color: #ffd33d;
      font-size: 15px;
      white-space: nowrap;
    }

    .skeleton-header-inner {
      display: flex;
      width: 100%;
      margin: 0 auto;
    }

    .header-btn-icon {
      font-size: 18px;
      cursor: pointer;
    }

    .el-badge__content {
      line-height: 15px;
    }
  }

  .header-popover {
    padding: 0;

    .dropdown-menu-item {
      margin: 0;
      padding: 10px;

      &:nth-child(n + 3) {
        cursor: pointer;

        &:hover {
          background-color: #eee;
        }
      }
    }
  }

  .theme-light {
    .header-logo {
      width: 115px;
      height: 27px;
      background-repeat: no-repeat;
    }
  }
</style>
